<template>
<div class="showCard-container" :style="{width:widthData, height:heightData}">
  <div class="payment-container" v-if="showPayment">
    <div class="close" @click="close">
      <img src="@/assets/Assets/close_btn.png" alt="">
    </div>
    <Payment />
  </div>
  <div class="list-container">
      <div class="list">
        <div class="list-child">
          <div v-if="!isShowTitle" class="shoCard-title">{{$t('menu.cartTitle')}}</div>
        <div v-for="item in showCardList" :key="item._id" class="containerRow item">
          <div>
            <!-- 餐品，名称 -->
              {{language==='zh-CN' ? item[0].name['zh-CN'] :item[0].name['en-US'] }}
          </div>
          <div class=" containerRow">
            <!-- 单价 -->
            <span class="cost">${{item[0].cost/100}}</span>
              <button @click="sub(item)" class="sub">-</button>
              <!-- 数量 -->
              <div class="number">{{item.length}}</div>
              <button @click="add(item)" class="add">+</button>
          </div>
        </div>
        </div>
      </div>
      <div >
        <div v-if="showPayment">
          <PayButton :total="total" @test='handle' />
        </div>
        <button class="button" @click="test" v-if="!showPayment">${{total}}</button>
      </div>
  </div>
  <div class="zhezhao" v-if="!isShowTitle"></div>
</div>
</template>

<script>

import { mapState, mapActions } from 'vuex';
import _ from 'lodash';
import { set } from '@/common/utils';

import Payment from '@/views/menu/components/Payment.vue';
import PayButton from '@/views/menu/components/PayButton.vue';

export default {
  data() {
    return {
      heightData: '',
      widthData: '320px',
      showPayment: false,
    };
  },
  components: {
    Payment,
    PayButton,
  },
  created() {
    this.cleanOrderListState();
    this.setShowCardList();
  },

  computed: {
    ...mapState({
      showCardList: (state) => state.menu.showCardList,

      orderListState: (state) => state.menu.orderListState,
      language: (state) => state.language.language,
    }),
    total() {
      let total = 0;
      _.forEach(this.showCardList, (value) => {
        _(value).forEach((item) => {
          total += item.cost;
        });
      });
      return total / 100;
    },
    // 购物车信息列表的key值，用来判断title是否显示
    isShowTitle() {
      let val = '';
      _.forEach(this.showCardList, (value, key) => {
        val = key;
      });
      return val;
    },
  },
  methods: {
    ...mapActions([
      'getOrderListState',
      'saveShowCard',
      'cleanOrderListState',
    ]),
    add(item) {
      //*  向vuex中添加点餐列表
      this.orderListState.push(item[0]);
      //*  往local storage中添加 vuex中的点餐列表
      set(this.$route.params.id, this.orderListState);
      this.setShowCardList();
    },
    sub(item) {
      let a = '';
      this.orderListState.forEach((element) => {
        const id1 = _.get(element, '_id');
        const id2 = _.get(item[0], '_id');
        if (id1 === id2) {
          a = _.indexOf(this.orderListState, element, 1);
        }
      });
      this.orderListState.splice(a, 1);

      //*  往local storage中添加 vuex中的点餐列表
      set(this.$route.params.id, this.orderListState);
      this.setShowCardList();
    },
    setShowCardList() {
      this.getOrderListState({ id: this.$route.params.id });

      const newList = _.groupBy(this.orderListState, '_id');

      this.saveShowCard({ list: newList });
    },
    test() {
      this.$data.heightData = '600px';
      this.$data.widthData = '750px';
      this.$data.showPayment = true;
    },
    close() {
      this.$data.showPayment = false;
      this.$data.heightData = '';
      this.$data.widthData = '320px';
    },
    handle(v) {
      this.$data.showPayment = v;
      this.$data.heightData = '';
      this.$data.widthData = '320px';
    },
  },

};
</script>

<style lang="scss" scoped>
@import '@/style/global.scss';
.showCard-container{
  position : fixed;
  right : 350px;
  bottom : 100px;
  z-index : 10;
  display : flex;
  justify-content : flex-end;
  width : 320px;
  max-height : 670px;
  padding : 15px 20px 20px;
  // overflow :auto;
  background-color : #ffffff;
  border : 1px solid #f7f7f7;
  box-shadow : 0 2px 8px 0 ;
  transition : all .2s linear;
  .zhezhao{
    position : absolute;
    top : 0;
    left : 0;
    z-index : 50;
    width : 100%;
    height : 100%;
    background-color : #ffffff;
    opacity :0.5;
  }
  .payment-container{
    width : 400px;
    padding : 25px;
    border-right : 2px solid #cccccc;
    .close{
      position : absolute;
      top : 0px;
      left : -80px
    }
  }

}
.list-container{
  display : flex;
  flex-direction : column;
  justify-content : space-between;
  width : 320px;
  margin-left : 30px;

  .list{
    max-height : 670px;

        overflow : auto;

  }
  // webkit隐藏滚动条，兼容性不好
  .list::-webkit-scrollbar {
    width : 0;
}

}
.shoCard-title{
  margin : 20px 0;
}
.button{
    width : 100%;
    height : 40px;
    padding : 0 20px;
    margin-top : 15px;
    font-family : PingFangSC-Regular;
    font-size : 16px;
    line-height : 1.5;
    color : #fff;
    cursor : pointer;
    background-color : #202020;
    border : 0;
    border-radius : 15px;
}
.button:hover{
    background-color : #0d9e65;
}
.cost{
  display : flex;
  align-items : center;
  margin-right : 10px;
}
.item{
 align-items : center;
 justify-content : space-between;
 margin : 20px 0;
}
.sub{
     float : right;
    padding : 0;
    border : 0;
    border-top-left-radius : 15px;
    border-top-right-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-left-radius : 15px;
}
.add{
  padding : 0 0 0 10px;
    text-align : left;
    border : 0;
    border-top-left-radius : 0;
    border-top-right-radius : 15px;
    border-bottom-right-radius : 15px;
    border-bottom-left-radius : 0;
}
.number{
  width : 24px;
  height : 30px;
  font-family : PingFangSC-Regular;
  line-height : 30px;
  color : #fff;
  text-align : center;
  background-color : #202020;
}
.sub,
.add{

    width : 29px;
    height : 30px;
    font-family : PingFangSC-Regular;
    font-size : 14px;
    line-height : 30px;
    color : #fff;
    background-color : #202020;

}
</style>
